<template>
  <section class="radio" :class="{'vertical': layout == 'vertical'}">
    <el-radio-group v-model="value" :disabled="disabled" @change="handleChange">
      <template v-if="type == 'button'">
        <el-radio-button v-for="(item, index) in list" :key="index" :label="item.value" :disabled="item.disabled">{{ item.name }}</el-radio-button>
      </template>
      <template v-else>
        <el-radio v-for="(item, index) in list" :key="index" :label="item.value" :disabled="item.disabled">{{ item.name }}</el-radio>
      </template>
    </el-radio-group>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VRadio',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {
        type: 'default',
        list: [
          { name: 'xxxx', value: 2 }
        ],
        layout: 'horizon',
        value: '',
        placeholder: '',
        disabled: false,
        required: false,
        msg: ''
      }
    }
  },
  computed: {
    type() {
      return this.option.type || 'default'
    },
    list() {
      return this.option.list || []
    },
    layout() {
      return this.option.layout || 'horizon'
    }
  },
  mounted() {
    if (this.option.override !== undefined) {
      this.option.override(this, this.value)
    }
    this.dispatch_event('filed-value-change', this.value)
  },
  methods: {
    getValue() {
      return this.value
    },

    setValue(v) {
      this.$set(this, 'value', v)
    },

    setCheck() {
      let { value, required } = this
      if (this.option.override !== undefined) {
        this.option.override(this, value)
      }
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.radio {
  /deep/ {
    .el-radio,
    .el-radio-button {
      margin-top: 5px;
    }
  }
  &.vertical {
    /deep/ {
      .el-radio,
      .el-radio-button {
        display: block;
      }
      .el-radio-button {
        .el-radio-button__inner {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
